<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Manipulation</title>
<style>
.body1{
	padding: 5px;
	border: 2px dotted orange;
	display: inline-block;
}
</style>
<script src="../lib/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
	$('.div1, .div2').css({
		'width' : '130px',
		'height' : '70px',
		'border' : '1px solid #00BFFF',
		'padding-top' : '50px',
		'text-align' : 'center'
	});
	
	
	// wrap 으로 씌운다.
	var w = "<div class='body1'></div>";
	$('.div1').wrap(w);
	
	// body1 클래스 안쪽의 뒤에 추가
	$('.body1').append('<hr/>');
	
	// body1 클래스 바깥쪽의 뒤에 추가
	$('.body1').append('<h5>.after로 삽이된 문자열</h5>');
	
	// 특정요소의 갯수를 출력하기
	var len = $('div').length;
	var len2 = $('.body1>div').length;
	// alert(len + ', ' + len2);
	
	//each를 사용하여 li의 문자색을 변경
	var c = ['#000000', '#ff0000', '#00ff00', '#0000ff', '#ffff00'];
	$('#mnt>li').each(function(pos){
		var a = pos%5;
		$(this).css('color', c[a]);
	});
	
	
});
</script>
</head>
<body>

<h3>Manipulation Example</h3>

<ul id="mnt">
	<li>백두산
	<li>금강산
	<li>한라산
	<li>설악산
	<li>치악산
	<li>아차산
	<li>지리산
	<li>북한산
	<li>내장산
	<li>청계산
	<li>뒷산
	<li>앞산
	<li>옆산
</ul>


<div class="div1">1</div>
<div class="div1">2</div>
<div class="div1">3</div>
<hr/>
<div class="div2">4</div>
<div class="div2">5</div>
<div class="div2">6</div>

</body>
</html>